<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="chart-content">
        <div class="item above">
          <span class="lxtip">
            <p>累计病例数</p>
            <h4>14521<em>人次</em></h4>
          </span>
          <span>
            <p class="pt5">更新时间</p>
            <p class="pt10">2021-11-10 00:00</p>
          </span>
        </div>
        <div class="item above lxtip2">
          <span class="pl60">
            <h4>21<em>人次</em></h4>
            <p>现有确诊</p>
          </span>
          <span>
            <p>
              核算检测人数   <i>12222人次</i>
            </p>
            <p class="pt20">
              疫苗接种人数   <i>23333人次</i>
            </p>
          </span>
        </div>
        <div class="item above lxtip3">
          <span class="pl60">
            <h4>5<em>人次</em></h4>
            <p>新增确诊</p>
          </span>
          <span>
            <p>
              治愈出院   <i>12222人次</i>
            </p>
            <p class="pt20">
              死亡人数   <i>12人次</i>
            </p>
          </span>
        </div>
      </div>                         
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis5-lxxinguanritongji',
  components:{Fragment},
  props:{
    title:{
      type:String
    },
    data:{
      type:Array
    }
  },
  methods:{
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
          return "warning-row"; //类名
      } else {
          return "success-row"; //类名
      }
    },
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    // height:calc( (100vh - 123px) / 3 - 36px) ;
    // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    height:calc( (100vh - 1.23rem) / 3 - .46rem) ;
    .chart-content{
      width: 100%;
      // height:calc( (100vh - 123px) / 3 - 36px) ;
      // height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      height:calc( (100vh - 1.23rem) / 3 - .46rem) ;
      .item{
        font-size: .16rem;
        .pt10{padding-top:.1rem}
        .pt5{padding-top:.05rem}
        .pl60{padding-left: .9rem;}
        .pt20{padding-top: .2rem;}
        margin-top:.1rem;
        span{
          width: 47%;
          overflow: hidden;
          display: inline-block;
          height: .54rem;
          p{
            margin:0;padding:0;
            color:#69C4E3;
            font-size: .12rem;
            position: relative;
            padding-top:.03rem;
            i{
              color: #ffffff;
              font-style: normal;
              position: absolute;
              left:1rem;
            }
          }
          h4{
            margin:0;padding:0;color:#ffffff;font-size: .22rem;
            padding-top:.13rem;
            em{
              font-style: normal;
              font-size: .12rem;
            }
          }
        }
        .lxtip{
          background: url('~@/assets/images/181.png') no-repeat;
          background-size: contain;
          padding-left: .7rem;
          margin-left: 3%;
        }
      }
      .lxtip2{
        background: url('~@/assets/images/501.png') no-repeat;
        margin-left: 3%;
        background-size: contain;
      }
      .lxtip3{
        background: url('~@/assets/images/501.png') no-repeat;
        margin-left: 3%;
        background-size: contain;
      }
    }
  }
  img{width: 100%;float: left;}
</style>